import {StyleSheet, View} from 'react-native';
import {
  Header,
  ObserverButton,
  ObserverText,
  ObserverView,
  TextInput,
} from '../../../components';
import {SvgPhone} from '../../../components/svg';
import {
  dpw12,
  dpw16,
  dpw24,
  dpw48,
  PHONE_REG,
  USER_INFO,
} from '../../../constants';
import {useState} from 'react';
import {useGlobalStore, useUserInfoStore} from '../../../mobx';
import {UpdatePassword} from '../../../services';
import {observer} from 'mobx-react-lite';
import {setItem} from '../../../utils';
import CountDown from '../../login/CountDown';

const styles = StyleSheet.create({
  box: {
    marginTop: dpw48,
    marginBottom: dpw24,
    paddingHorizontal: dpw16,
  },
  iconbox: {
    position: 'absolute',
    right: -dpw12,
    top: -dpw24,
  },
  submit: {
    marginHorizontal: dpw16,
    marginBottom: dpw24,
  },
});

const codeArr = [
  {
    placeholder: 'enterMobile',
    name: 'Mobile',
    maxLength: 11,
    after: (
      <View style={styles.iconbox}>
        <SvgPhone scale={0.5} />
      </View>
    ),
  },
  {
    placeholder: 'enterCode',
    name: 'Code',
    maxLength: 6,
  },
];

const BindMobile = ({navigation}: any) => {
  const [{Mobile, Code}, setFormData] = useState({
    Mobile: '',
    Code: null,
  });
  const {changeToastKey} = useGlobalStore();
  const {setUserInfo, userInfo} = useUserInfoStore();

  const onSubmit = () => {
    if (!Mobile || PHONE_REG.test(Mobile)) {
      changeToastKey('please_enter_correct_phone');
      return;
    }
    if (!Code) {
      changeToastKey('enterCode');
      return;
    }
    UpdatePassword({
      Mobile,
      Code,
      UT: userInfo?.Token,
    })
      .then(() => {
        setItem(USER_INFO, {...userInfo, Mobile})
          .then(() => {
            setUserInfo({...userInfo, Mobile});
            changeToastKey('bindSucsess');
          })
          .catch(() => {});
      })
      .catch(err => {
        changeToastKey(err?.data.Message);
      });
  };

  return (
    <ObserverView style={{flex: 1}}>
      <Header title="bindMobile" navigation={navigation} isCenter />
      <View style={styles.box}>
        {codeArr.map(it => {
          if (it.name === 'Code') {
            return (
              <View key={it.name} style={{flexDirection: 'row'}}>
                <TextInput
                  {...it}
                  onChangeText={text =>
                    setFormData((p: any) => ({...p, [it.name]: text}))
                  }
                  boxStyle={{flex: 1}}
                />
                <CountDown mobile={Mobile} />
              </View>
            );
          }
          return (
            <TextInput
              key={it.name}
              {...it}
              onChangeText={text =>
                setFormData((p: any) => ({...p, [it.name]: text}))
              }
            />
          );
        })}
      </View>
      <ObserverButton
        style={styles.submit}
        tKey="submit"
        type="primary"
        onPress={onSubmit}
      />
      <ObserverText
        style={{marginHorizontal: 'auto'}}
        tKey="bindSend"
        type="desc"
      />
    </ObserverView>
  );
};

export default observer(BindMobile);
